<template>
  <div class="content">
    <div class="cont" :style="contStyle">
      <div class="logo">
        <span>S</span>
        <span>e</span>
        <span>a</span>
        <img src="../assets/image/logo.png" alt=""/>
        <span>r</span>
        <span>c</span>
        <span>h</span>
      </div>
      <div class="search">
        <div class="txt_box">
          <input class="search_txt" type="text" v-model="searchInfo" placeholder="请输入内容"
                 @keyup.enter="search(0)"/>
        </div>
        <div class="btn_box">
          <input class="search_btn" type="button" value="Go->" @click="search(0)"/>
        </div>

        <a href="#" class="clear" @click="clearInfo">清空搜索项</a>
      </div>
    </div>
    <div class="info" v-show="infoStyle">
            <span v-if="total === 0">未找到您所搜索的信息,您可
                    <a :href="'https://www.baidu.com/s?ie=utf-8&rsv_dp=1&rsv_idx=1&tn=baidu&wd='+searchInfo"
                       target="_blank">百度更多信息</a>
            </span>
      <span v-else>为您找到{{ total }}本书</span>
    </div>
    <div class="result" v-show="resultStyle">
      <div class="list">
        <div class="list_item" v-for="book in books" :key="book.id">
          <img :src="'http://localhost:8080/api/'+book.img" alt="">
          <div class="banner">
            <div class="banner_top">{{ book.bookName }}</div>
            <div class="banner_bottom">{{ book.author }}</div>
          </div>
        </div>
      </div>
      <div class="page">
        <!-- <div class="page"><a>首页</a></div> -->
        <div class="last_page"><a href="#" @click="lastPage">上一页</a></div>
        <div class="next_page"><a href="#" @click="nextPage">下一页</a></div>
        <!-- <div class="page"><a>尾页</a></div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref, watch} from "vue";
import axios from "axios";
import emitter from "@/utils/event-bus";

axios.defaults.baseURL = "http://localhost:8080";

// 变量
let searchInfo = ref("")
let page = ref(1)
let total = ref(0)
let books = reactive([])
let contStyle = ref("")
let infoStyle = ref(false)
let resultStyle = ref(false)

// 方法
let search = (i) => {
  axios.get("/api/books/" + searchInfo.value, {
    params: {
      page: i !== 0 ? i : 1
    }
  }).then(resp => {
    // let data = resp.data;
    if (i === 0) {
      total.value = resp.data.total;
      books.splice(0)
      infoStyle.value = true
      i = 1
    }
    if (resp.data.books.length !== 0) {
      books.splice(0)
      for (let a = 0; a < resp.data.books.length; a++) {
        books.push(resp.data.books[a])
      }
      page.value = i
    }
    if (page.value !== i) {
      alertMsg("没有下一页了")
    }
  }).catch(err => console.log(err));
}

let clearInfo = () => {
  // console.log(1)
  searchInfo.value = ""
  books.splice(0)
  total.value = 0
  infoStyle.value = false
}

let lastPage = () => {
  if (page.value === 1)
    alertMsg("没有上一页了")
  else
    search(page.value - 1)
}

let nextPage = () => {
  search(page.value + 1)
}

let alertMsg = (value) => {
  emitter.emit('alert', value)
}

// 监听
watch(total, (value) => {
  if (value !== 0) {
    contStyle.value = 'padding-top: 0'
    resultStyle.value = true
  } else {
    contStyle.value = ''
    resultStyle.value = false
  }
})

</script>

<style>
/* content */
.content {
  width: 100%;
  height: 88%;
}

.cont {
  width: 100%;
  padding-top: 8%;
}

.cont .logo {
  width: 451px;
  height: 100px;
  margin: 0 auto;
}

.cont .logo span {
  font-weight: bold;
  font-family: 字心坊猫的天空之城, serif;
  font-size: 100px;
}

.cont .logo img {
  vertical-align: -11px;
}

.cont .search {
  width: 600px;
  height: 57px;
  margin: 4% auto;
}

.cont .search .clear {
  padding-top: 20px;
  margin-left: 60%;
  color: #e57f89;
  font-weight: bold;
  font-family: 伯乐夏日微风体, serif;
}

.cont .search .txt_box {
  width: 75%;
  height: 100%;
  float: left;
}

.cont .search .txt_box .search_txt {
  font-family: 字魂93号-萌趣小丸子, serif;
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  float: right;
  height: 57px;
  text-align: center;
  box-sizing: border-box;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  border: 3px solid #dfd6bf;
}

.cont .search .btn_box {
  float: right;
  width: 25%;
  height: 100%;
}

.cont .search .search_btn {
  width: 100%;
  float: left;
  height: 57px;
  box-sizing: border-box;
  background: #dfd6bf;
  border-bottom-right-radius: 30px;
  border-top-right-radius: 30px;
  border: 3px solid #dfd6bf;
  font-family: 伯乐夏日微风体, serif;
  font-weight: bold;
  font-size: 20px;
}

/* result_info */
.info {
  font-family: 字心坊猫的天空之城, serif;
  /*color: #dfd6bf;*/
  margin: 0 auto;
  width: 70%;
  font-size: 20px;
  height: 50px;
}

.info a {
  color: red;
}

/* result_list */
.result {
  width: 70%;
  height: 350px;
  margin: 0 auto;
}

.list {
  height: 90%;
}

.list_item {
  width: 25%;
  float: left;
  /* height: 80%; */
  text-align: center;
}

.list_item img {
  width: 190px;
  height: 250px;
}

.banner {
  width: 70%;
  /* border: 1px solid;
  border-radius: 10px; */
  margin: 0 auto;
}

.banner_top {
  /* margin-top: 5px; */
  font-family: 字心坊猫的天空之城, serif;
  font-size: 17px;
  /* width: 60%; */
  /* margin: 0 auto; */
  text-align: center;
}

.banner_bottom {
  font-family: 伯乐夏日微风体, serif;
  color: #5e767a;
  margin: 3px auto;
  width: 90%;
  border-top: 2px solid #b3b3b3;
  font-size: 5px;
}

.page {
  width: 12%;
  height: 10%;
  margin: 0 auto;
  padding-top: -10px;
}

.page a {
  font-family: 字心坊猫的天空之城, serif;
  color: #dfd6bf;
}

.page a:hover {
  color: red;
}

.last_page {
  float: left;
}

.next_page {
  float: right;
}

</style>